<!DOCTYPE html>
<div>
    <table>
        <tbody id="content"></tbody>
    </table>
</div>
<script src="/prj/plugins/jquery/jquery.min.js"></script>
<script>
    $(function () {
        let v=test();
        //console.log(v);
        $.get("/prj/json/index","name="+v,function (result) {
            //console.log(result.code);
            //只需要data部分即可
            console.log(result.data);

            let arr=result.data;
            let str="";
            for(let i=0;i<arr.length;i++){
                str+="<tr>";
                str+="<td class='name' ondblclick='update_name(this,"+arr[i].id+")'>"+arr[i].name+"</td>";
                //坑 -td是没有name属性的
                str+="<td class='age' ondblclick='update_age(this,"+arr[i].id+")'>"+arr[i].age+"</td>";
                str+="<td><a href='#' onclick='del(this,"+arr[i].id+")'>删除</a></td>";
                str+="</tr>";
            }
            $("#content").append(str);
        })
    });
    function del(obj,id) {
        $.post('/prj/json/del',{"id":id},function (data) {
            if(data.code=="200"){
                let tr=obj.parentElement.parentElement;
                $(tr).remove();//转化成json对象后使用remove方法从tbody中移除当前要删除的td
            }
        })
    }

    function update_name(obj,id) {
        let str= "<input onblur='update_input(this,"+id+")' type='text' value='"+obj.innerText+"'>";
        obj.innerHTML=str;
    }

    // function update_age(obj,id) {
    //     let str= "<input onblur='update_input(this,"+id+")' type='text' value='"+obj.innerText+"'>";
    //     obj.innerHTML=str;//这里一定要写innerHTML,包含标签的值
    // }

    function update_input(obj,id) {
        $.post("/prj/json/update",{"name":obj.value,"id":id},function (data) {
            if(data.code=="200"){
                obj.parentElement.innerText=obj.value;
            }
        })
    }
</script>